<template>
  <div>
    <h2>人员列表</h2>
    <input type="text" placeholder="请输入人员姓名" v-model="name"/>
    <button @click="add">添加</button>
    <h2 style="color: #bd362f">上方的求和的值为：{{sum}}</h2>
    <ul>
      <li v-for="p in personList" :key="p.id">{{p.name}}</li>
    </ul>
  </div>
</template>

<script>
  import {nanoid} from 'nanoid'
  export default {
    name: 'Person',
    data(){
      return {
        name: ''
      }
    },
    methods:{
      add(){
        const personObj = {id:nanoid(), name:this.name}
        this.$store.commit('ADD_PERSON', personObj)
        this.name = ''
      }
    },
    computed:{
      personList(){
        return this.$store.state.personList
      },
      sum(){
        return this.$store.state.sum
      }
    }
  }
</script>